import Vue from 'vue'
import styles from './message.module.less'
// 样式文件命名：[filename] + .module + .[ext]（后缀名）
// vue 遇见这样命名的，会使用 css-loader 模块化
import Icon from '../components/Icon'

function get_component_dom(component, props) {
    const vm = new Vue({
        render: h => h(component, { props })
    }).$mount()     // 必须挂载之后，才能导出 dom 实例
    return vm.$el   // 返回 dom 对象
}

function remove_dom(dom) {
    dom.style.opacity = 0
    dom.style.transform = 'translate(-50%, -50%) translateY(-40px)'
    dom.ontransitionend = () => {
        dom.remove()
    }
}

/**
 * show_message     弹出消息
 * @param {string} content 消息内容
 * @param {string} type 消息类型    info 普通消息，warn 警告消息，success 成功消息，error 错误消息
 * @param {boolean} is_respond 是否需要回应
 * @param {HTMLElement} container 外层容器
 * @param {number} duration 消息显示时长（单位：毫秒）
 */
function show_message({ content, type = 'info', is_respond = false, container = document.body, duration = 2500 }) {
    const div = document.createElement('div')
    div.className = styles.message
    if (getComputedStyle(container).position === 'static') {
        // 如果父容器是静态布局，设置为相对定位
        container.style.position = 'relative'
    }
    const icon = get_component_dom(Icon, { type })
    // 根据消息类型添加相应的颜色样式
    icon.classList.add(styles['message-' + type])
    div.innerHTML = `${icon.outerHTML} ${content}<br>`

    if (!is_respond) {
        setTimeout(() => {
            remove_dom(div)
        }, duration);
    } else {
        const button = document.createElement('button')
        button.innerHTML = '确定'
        div.appendChild(button)
        button.onclick = () => {
            remove_dom(div)
        }
    }
    container.appendChild(div)
    div.offsetLeft  // 读取 dom 尺寸、位置，触发浏览器重排
    div.style.opacity = 1
    div.style.transform = 'translate(-50%, -50%)'
}


export { get_component_dom, show_message }